<template>
  <view class="qcode-content">
    <template v-if="obj.type === 'film'">
      <view class="tc fs34 title mb20">取电影票</view>
      <view class="tc mb10 number">{{ obj.ticketNum + '张电影票' }}</view>
      <zm-image v-if="qrUrl && orderStatus !== 'film-3'" :src="qrUrl" width="326rpx" height="326rpx" custom-class="mb10"></zm-image>
      <!-- 已放映 -->
      <view v-if="orderStatus === 'film-3'" class="mb10 qrCode-image"></view>
      <view v-if="orderInfo.ns && orderInfo.ns.length > 0" @click="openQrcode" class="btn-bg btn-qrcode mt20">查看国标二维码</view>

      <view v-for="(item, index) in obj.ticketInfo" :key="index" class="flex code-item mt20">
        <view class="code-label">{{ item.name + ':' }}</view>
        <view class="code-text">{{ item.value }}</view>
      </view>
    </template>

    <template v-else>
      <view class="tc mb10 number">{{ obj.goodsList[topSwiperIndex].name }}</view>
      <view class="qcode-content__swiper-box">
        <view @click="changeQr('pre')" class="qcode-content__left-arrow"><u-icon name="arrow-left-double"></u-icon></view>
        <swiper v-if="qrUrl" :indicator-dots="false" :current="topSwiperIndex" class="qcode-content__swiper" @change="topSwiperTab">
          <swiper-item v-for="(item, index) in qrUrl" :key="index">
            <zm-image v-if="obj.goodsList[index].isVerification === '0'" :src="item" width="326rpx" height="326rpx"></zm-image>
            <view v-else class="qrCode-image qrCode-image-mall"></view>
          </swiper-item>
        </swiper>
        <view @click="changeQr('append')" class="qcode-content__right-arrow"><u-icon name="arrow-right-double"></u-icon></view>
      </view>
      <!-- </view> -->
      <view class="fc-yellow fs28 b">{{ checkTip }}</view>
      <view class="flex code-item mb20">
        <view class="code-label">券码：</view>
        <view class="code-text">{{ obj.goodsList[topSwiperIndex].code }}</view>
      </view>
      <view class="flex code-item mb20">
        <view class="code-label">有效期：</view>
        <view class="code-text">{{ obj.goodsList[topSwiperIndex].period }}</view>
      </view>
    </template>
    <qcode-detail-gb v-if="showDialog" v-model="showDialog" :order-info="orderInfo"></qcode-detail-gb>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  import QcodeDetailGb from './QcodeDetailGb.vue'
  export default {
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      },
      orderStatus: {
        type: String,
        default: ''
      },
      //取影票国标二维码
      orderInfo: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      ZmImage,
      QcodeDetailGb
    },
    data() {
      console.log('orderInfo', this.orderInfo)
      console.log(this.orderStatus, 'obj', this.obj)
      return {
        topSwiperIndex: 0,
        showDialog: false
      }
    },
    methods: {
      handleClick() {
        this.$emit('click')
      },
      topSwiperTab(e) {
        this.topSwiperIndex = Number(e.target.current)
        this.$emit('select', this.topSwiperIndex)
      },
      changeQr(type) {
        if (type === 'pre') {
          this.topSwiperIndex = this.topSwiperIndex !== 0 ? this.topSwiperIndex - 1 : this.qrUrl.length - 1
        } else {
          this.topSwiperIndex = this.qrUrl.length - 1 === this.topSwiperIndex ? 0 : this.topSwiperIndex + 1
        }
        this.$emit('select', this.topSwiperIndex)
      },
      openQrcode() {
        this.showDialog = true
      }
    },
    computed: {
      checkTip() {
        let text = ''
        try {
          text = this.orderInfo.goodCouponDetail[0].checkTip
        } catch (error) {
          text = ''
        }
        return text
      },
      qrUrl() {
        if (this.obj.type === 'film' && this.obj.qrCode) {
          console.log('this.obj', this.obj, this.$utils.qrcodeCreate(this.obj.qrCode))
          return this.$utils.qrcodeCreate(this.obj.qrCode)
        } else if (this.obj.type === 'mall' && this.obj.goodsList && this.obj.goodsList.length > 0) {
          const arr = []
          this.obj.goodsList.forEach((item) => {
            arr.push(this.$utils.qrcodeCreate(item.code))
          })
          return arr
        } else {
          return ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .qcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 30rpx 0;
    .qrCode-image {
      width: 326rpx;
      height: 326rpx;
      background-size: 100% 100%;
      background-image: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/qrCodeFilm.png');
      background-position: center;
    }
    .qrCode-image-mall {
      background-image: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/qrCodeMall.png');
    }
    .btn-qrcode {
      width: 300rpx;
      height: 80rpx;
      font-size: 30rpx;
      color: white;
      border-radius: 20rpx;
      text-align: center;
      line-height: 80rpx;
    }
    .title {
      font-weight: bold;
    }
    .number {
      color: #4bcfdd;
    }
    .code-item {
      width: 514rpx;
      height: 78rpx;
      background: #f9f9f9;
      border-radius: 14rpx;
      margin: 0 auto;
      align-items: center;
      .code-label {
        width: 160rpx;
        text-align: center;
        font-size: 26rpx;
        color: #888;
      }
      .code-text {
        color: #333;
        font-size: 26rpx;
        font-weight: bold;
      }
    }
    &__swiper-box {
      position: relative;
    }
    &__swiper {
      width: 340upx;
      height: 340upx;
    }
    &__left-arrow {
      position: absolute;
      top: 50%;
      left: -25%;
      transform: translateY(-50%);
    }
    &__right-arrow {
      position: absolute;
      top: 50%;
      right: -20%;
      transform: translateY(-50%);
    }
  }
</style>
